<template>
	<view class="content">
		<!-- [uni-nav-bar 自定义导航栏](https://uniapp.dcloud.net.cn/component/uniui/uni-nav-bar.html) -->
		<uni-nav-bar ref="navBar" class="uni-navi-bar" status-bar="true" border="false" color="#FFFFFF" fixed="true">
			<template v-slot:left>
				<image class="image-fashion-logo" src="../../static/icon_fashion.png" mode="widthFix"
					@click="onFashionLogoClick"></image>
			</template>
		</uni-nav-bar>
		<scroll-view class="scroll-view" scroll-y="true" enable-back-to-top="true" refresher-enabled="true"
			lower-threshold="100" @refresherrefresh="onRefresh" @scrolltolower="onLoadMore"
			:refresher-triggered="refresherTriggered" :style="{'height':(scrollViewHeight+'px')}">
			<view class="view-tmp2" v-for="(item,index) in items" :key="index"></view>
			<uni-load-more :status="loadMoreViewStatus" :icon-size="16" v-if="loadMoreViewShow" />
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '动态',
				navBarHeight: 0,
				scrollViewHeight: 1000,
				refresherTriggered: false,
				loadMoreViewShow: false,
				// loadMoreViewContentText: {contentnomore:"到底啦~"},
				loadMoreViewStatus: 'loading',
				items: [{}, {}, {}, {}, {}, {}],
				page: 1,
				maxPage: 3
			}
		},
		onLoad() {
			uni.setTabBarBadge({
				index: 0,
				text: "6"
			});
			uni.showTabBarRedDot({
				index: 2
			})
			var systemInfo = uni.getSystemInfoSync();
			//scroll-view的高度 = 屏幕高度 -（顶部状态栏高度 + 导航栏高度） -（底部tabBar高度 + 底部安全区域高度）
			this.scrollViewHeight = systemInfo.screenHeight - (uni.getSystemInfoSync()
				.statusBarHeight + this.$refs.navBar.height) - (systemInfo.safeAreaInsets.bottom + 44);
		},
		methods: {
			onFashionLogoClick() {
				uni.showToast({
					title: "fashion"
				})
			},
			onRefresh(e) {
				console.log(e);
				var _this = this;
				_this.page = 1;
				_this.refresherTriggered = true;
				setTimeout(() => {
					_this.loadMoreViewShow = false;
					_this.loadMoreViewStatus = "loading"
					_this.items = [{}, {}, {}, {}, {}, {}];
					_this.refresherTriggered = false;
				}, 1000)
			},
			onLoadMore(e) {
				var _this = this;
				_this.loadMoreViewShow = true;
				if (_this.page >= _this.maxPage) {
					_this.loadMoreViewStatus = "noMore";
					return;
				}
				_this.loadMoreViewStatus = "loading"
				_this.page++;
				setTimeout(() => {
					_this.items = _this.items.concat([{}, {}, {}]);
					_this.loadMoreViewShow = false;
				}, 1000)
			}
		}
	}
</script>

<style lang="scss">
	@import url('../../static/common.scss');
</style>